<template>
  <div class="searchContainer">
    <!-- 头部 -->
    <div class="top">
      <span class="left">
        <i class="ri-search-line"></i>
        <input
          type="text"
          placeholder="技术有限只能搜索'你好'有结果~"
          v-model="keyword"
          @click="show=!show"
        />
        <i
          class="ri-close-circle-line"
          v-if="keyword"
          @click="cancel1"
        ></i>
      </span>
      <span class="right" @click="cancel">取消</span>
      <!-- <van-cell plain type="info" @touchstart.native.stop="show = true">
      </van-cell> -->
      <van-number-keyboard
        v-model='keyword'
        :show="show"
        title=""
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @hide="onInput"
      />
    </div>
    <!-- 没点搜索的时候 -->
    <div v-if="!keyword">
      <!-- 搜索榜单 -->
      <div class="searchList">
        <!-- 顶部搜索 -->
        <div class="saerchTip">
          <span>搜索发现</span>
          <span class="showIcon" @click="isShowList = !isShowList">
            <i v-if="isShowList" class="ri-eye-line"></i>
            <i v-else class="ri-eye-off-line"></i>
          </span>
        </div>
        <!-- 遍历数据 -->
        <ul class="contextList" v-show="isShowList">
          <li v-for="item in searchList" :key="item.id">{{ item.name }}</li>
        </ul>
        <div v-show="!isShowList" class="hide">当前搜索发现已隐藏</div>
      </div>
      <Movie />
    </div>
    <!-- 点击搜索的时候弹出来 -->
    <div class="searchDetail" v-else>
      <span v-show="matchList.length" v-for="item in matchList" :key="item.id">
        <i class="ri-search-2-line"></i>{{ item.name }}
      </span>
      <div v-show="matchList.length" class="look">
        查看[{{ keyword }}]的搜索结果
      </div>
      <div v-show="matchList.length" class="icon">
        <i class="ri-message-3-line"></i>举报
      </div>
      <span v-show="!matchList.length && !ismatch" class="error">
        <i class="ri-error-warning-line"></i>服务器走丢了...
      </span>
    </div>
  </div>
</template>

<script>
// 引入获取搜索列表的数据
import { getSearch, getSearchDetail } from "@/api";
import Movie from "./movie";
// 函数节流
let isthrottle = false;
export default {
  name: "Sousuo",
  data() {
    return {
      // 搜索关键字
      keyword: "",
      // 展示标识符
      isShowList: true,
      // 搜索列表
      searchList: [],
      // 搜索是否匹配到
      ismatch: true,
      // 搜素到的列表
      matchList: [],
      // 键盘的显示
      show:true
    };
  },
  components: {
    Movie,
  },
  methods: {
    //键盘收起来时发送请求
    async onInput(){
        this.matchList = [];
      this.ismatch = false;
      // 不等于真返回不发送请求后面代码不执行
      if (isthrottle) {
        return;
      }
      isthrottle = true;
      // 200毫秒以后改为true
      setTimeout(() => {
        isthrottle = false;
      }, 2000);
      // 200毫秒true时候发送请求
      let result = await getSearchDetail();
      // 发送完之后再改为false节流起作用
      // console.log(result);
      // 对比数据库中是否有和输入的关键字有吻合的有的话就遍历数据展示
      // 没有吻合的就返回告诉用户没有搜索到关键字
      if (!result.code === 200) {
        alert("网络出错了");
      }
      let dataList = result.data.title;
      let { keyword } = this;
      let ismatch = dataList.some((item) => {
        return item.name === keyword;
      });
      //没匹配
      if (!ismatch) {
        this.ismatch = false;
        this.matchList = [];
        return;
      }
      this.matchList = dataList;
      // console.log(123);
    },
    // 点取消
    cancel() {
      this.ismatch = true;
      this.matchList = [];
      this.$router.push("/home");
    },
    // 点击图标
    cancel1(){
      this.keyword = ''
      this.matchList = [];
    }
  },
  async mounted() {
    //获取热搜内容
    let result = await getSearch();
    if (result.code === 200) {
      this.searchList = result.data.title;
    }
  },
};
</script>

<style lang='less' scoped>
// 最外侧容器
.searchContainer {
  position: fixed;
  max-width: 375px;
  height: 100%;
  // 头部整体容器
  .top {
    width: 360px;
    height: 30px;
    // background: violet;
    margin: 8px 0 0 8px;
    .left {
      position: relative;
      text-align: center;
      .ri-search-line {
        position: absolute;
        top: 0px;
        left: 4px;
        color: #a6a6a6;
      }
      input {
        padding: 5px 20px;
        width: 260px;
        border-radius: 10px;
        border: none;
        background: #f6f6f6;
      }
      .ri-close-circle-line {
        position: absolute;
        right: 10px;
        top: 0px;
      }
    }
    .right {
      height: 30px;
      width: 35px;
      // background: violet;
      position: relative;
      right: -10px;
      line-height: 30px;
      font-weight: bold;
      color: #6d6d6d;
    }
  }
  // 搜索榜单整体容器
  .searchList {
    height: 180px;
    width: 100%;
    // background: yellowgreen;
    // 搜索榜单顶部
    .saerchTip {
      width: 350px;
      height: 30px;
      margin: 0 auto;
      // background: violet;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      // 小图标容器
      .showIcon {
        width: 20px;
        height: 20px;
        color: #b8b8b8;
      }
    }
    // 搜索列表内容容器
    .contextList {
      width: 350px;
      height: 140px;
      margin: 0 auto;
      // background: violet;
      flex-wrap: wrap;
      justify-content: space-between;
      overflow: hidden;
      display: flex;
      li {
        height: 27px;
        width: 45%;
        line-height: 30px;
        font-size: 14px;
        white-space: pre-wrap;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        padding-left: 2px;
      }
    }
    // 搜索隐藏样式
    .hide {
      font-size: 20px;
      text-align: center;
      line-height: 160px;
    }
  }
  // 搜索详情
  .searchDetail {
    height: 410px;
    width: 360px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    span {
      width: 100%;
      height: 40px;
      line-height: 30px;
      i {
        font-size: 20px;
        color: #c8c8c8;
        margin: 20px;
      }
      &.error {
        height: 410px;
        width: 360px;
        // background: chocolate;
        line-height: 410px;
        text-align: center;
        font-size: 30px;
        .ri-error-warning-line {
          font-size: 30px;
          color: red;
        }
      }
    }
    .look {
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 100%;
      margin: 40px auto;
      // background: chartreuse;
      color: #5b85b5;
      border-bottom: 1px solid #949494;
    }
    .icon {
      height: 20px;
      line-height: 20px;
      text-align: center;
      width: 100%;
      margin: 10px auto;
      // background: chartreuse;
      color: #969696;
      i {
        margin: 0 10px;
      }
    }
  }
}
</style>
